<template>
    <common-page title="注册新账号">
        <el-steps :active="stepActive" finish-status="success" simple>
            <el-step title="基础信息"/>
            <el-step title="详细信息"/>
            <el-step title="完成注册"/>
        </el-steps>
        <el-form v-if="stepActive==0" ref="stepForm0" :label-width="120" :model="form" :rules="rules">
            <el-form-item label="登录账号" prop="user">
                <el-input v-model="form.user" placeholder="请输入登录账号"></el-input>
                <div class="el-form-item-msg">登录账号将作为登录时的唯一凭证</div>
            </el-form-item>
            <el-form-item label="登录密码" prop="password">
                <el-input v-model="form.password" placeholder="请输入登录密码" show-password type="password"></el-input>
                <m-password-strength v-model="form.password"></m-password-strength>
                <div class="el-form-item-msg">请输入包含英文、数字的8位以上密码</div>
            </el-form-item>
            <el-form-item label="确认密码" prop="password2">
                <el-input v-model="form.password2" placeholder="请再一次输入登录密码" show-password type="password"></el-input>
            </el-form-item>
            <el-form-item label="" prop="agree">
                <el-checkbox v-model="form.agree" label="">已阅读并同意</el-checkbox>
                <span class="link"
                      @click="showAgree=true">《平台服务协议》</span>
            </el-form-item>
        </el-form>
        <el-form v-if="stepActive==1" ref="stepForm1" :label-width="120" :model="form" :rules="rules">
            <el-form-item label="真实姓名" prop="userName">
                <el-input v-model="form.userName" placeholder="请输入真实姓名"></el-input>
            </el-form-item>
            <el-form-item label="邮箱" prop="email">
                <el-input v-model="form.email" placeholder="请输入邮箱地址"></el-input>
            </el-form-item>
            <el-form-item label="账号类型" prop="userType">
                <el-radio-group v-model="form.userType">
                    <el-radio-button label="1">企业开发者</el-radio-button>
                    <el-radio-button label="2">企业开发者</el-radio-button>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="开通类别" prop="open">
                <el-checkbox-group v-model="form.open">
                    <el-checkbox label="1">云存储API</el-checkbox>
                    <el-checkbox label="2">云检索API</el-checkbox>
                    <el-checkbox label="3">Javescript API</el-checkbox>
                </el-checkbox-group>
            </el-form-item>
        </el-form>
        <div v-if="stepActive==2">
            <el-result icon="success" sub-title="可以使用登录账号以及手机号登录系统" title="注册成功">
                <template #extra>
                    <el-button type="primary" @click="goLogin">前去登录</el-button>
                </template>
            </el-result>
        </div>
        <el-form style="text-align: center;">
            <el-button v-if="stepActive>0 && stepActive<2" @click="pre">上一步</el-button>
            <el-button v-if="stepActive<1" type="primary" @click="next">下一步</el-button>
            <el-button v-if="stepActive==1" type="primary" @click="save">提交</el-button>
        </el-form>
        <el-dialog v-model="showAgree" :width="800" destroy-on-close title="平台服务协议">
            平台服务协议
            <template #footer>
                <el-button @click="showAgree=false">取消</el-button>
                <el-button type="primary" @click="showAgree=false;form.agree=true;">我已阅读并同意</el-button>
            </template>
        </el-dialog>
    </common-page>
</template>

<script lang="ts" setup>
import {onMounted, reactive, ref} from 'vue'
import {useRouter} from 'vue-router'
import MPasswordStrength from '@/components/password-strength/index.vue'
import CommonPage from './common-page.vue'

const router = useRouter()
const stepActive = ref(0);
const showAgree = ref(false)
const stepForm0 = ref()
const stepForm1 = ref()

const form = reactive({
    user: "",
    password: "",
    password2: "",
    agree: false,
    userName: "",
    email: "",
    userType: "1",
    open: []
})

const rules = ref({
    user: [{required: true, message: '请输入账号名'}],
    password: [{required: true, message: '请输入密码'}],
    password2: [{required: true, message: '请再次输入密码'},
        {
            validator: (rule: any, value: any, callback: (e?: Error) => any) => {
                if (value !== form.password) {
                    callback(new Error('两次输入密码不一致'));
                } else {
                    callback();
                }
            }
        }],
    agree: [{
        validator: (rule: any, value: any, callback: (e?: Error) => any) => {
            if (!value) {
                callback(new Error('请阅读并同意协议'));
            } else {
                callback();
            }
        }
    }],
    userName: [{required: true, message: '请输入真实姓名'}],
    email: [{required: true, message: '请输入邮箱地址'}],
    userType: [{required: true, message: '请选择账户类型'}],
    open: [{required: true, message: '请选择开通类别'}]
})

onMounted(() => {
})


const pre = () => {
    stepActive.value -= 1
}

const next = () => {
    const formName = `stepForm_${stepActive}`
    stepForm0.value.validate((valid: any) => {
        if (valid) {
            stepActive.value += 1
        } else {
            return false
        }
    })
}
const save = () => {
    const formName = `stepForm_${stepActive}`
    stepForm1.value.validate((valid: any) => {
        if (valid) {
            stepActive.value += 1
        } else {
            return false
        }
    })
}
const goLogin = () => {
    router.push({
        path: '/login'
    })
}

</script>

<style scoped>

</style>
